<template>
	<div class="activeDatePicker">
		<div class="datePicker1">
			<h3>DatePicker 日期选择器</h3>
			<el-row :gutter="20">
				<span>选择日</span>
				<p>基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数</p>
				<el-col :span="10">
					<span>默认</span>
					<el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
				</el-col>
				<el-col :span="10">
					<span>带快捷选项</span>
					<el-date-picker v-model="value2" align="right" :picker-options="pickerOptions1" type="date" placeholder="选择日期"></el-date-picker>
				</el-col>
			</el-row>
		</div>
		<div class="datePicker2">
			<h3>其他日期单位</h3>
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="mr10">周</div>
					<el-date-picker class="mr10" v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周"></el-date-picker>
				</el-col>
				<el-col :span="12">
					<div class="mr10">月</div>
					<el-date-picker class="mr10" v-model="month" type="month" placeholder="选择月"></el-date-picker>
				</el-col>
				<el-col :span="12">
					<div class="mr10">年</div>
					<el-date-picker class="mr10" v-model="year" type="year" placeholder="选择年"></el-date-picker>
				</el-col>
				<el-col :span="12">
					<div class="mr10">多个日期</div>
					<el-date-picker class="mr10" v-model="dates" type="dates" placeholder="选择一个或多个日期"></el-date-picker>
				</el-col>
			</el-row>
		</div>
		<div class="datePicker3">
			<h3>选择日期范围(可以使用unlink-panels属性解除联动)</h3>
			<el-row :gutter="20">
				<el-col :span="24">
					<p>默认</p>
					<p>{{value6}}</p>
					<el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</el-col>
				<el-col :span="24">
					<p>带快捷选项</p>
					<el-date-picker v-model="value7" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2"></el-date-picker>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				week: '',
				month: '',
				year: '',
				dates: [],
				value6: '',
				value7: '',
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				pickerOptions2: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		}
	}
</script>

<style>
	.mr10 {
		margin-top: 10px;
	}
</style>